<template>
  <div :class="['avatar_box', size]">
    <div :class="['avatar_img',...imgStyle]">
      <img :class="['avatar_img',...imgStyle]" :src="avatarUrl" />
      <div v-if="gender!=null" :class="['gender',gender==2?'female':gender==1?'male':'']"></div>
    </div>
    <div v-if="userName||level" class="username_box f_r_c_c">
      <span v-if="userName" class="user_name f_r_c_c">
        {{userName}}
        <span v-if="level" class="user_level">{{level}}</span>
      </span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "avatar-com",
  props: {
    avatarUrl: {
      type: String,
      default: "/game/static/images/default_avatar.png"
    },
    gender: {
      default: null
    },
    userName: {
      type: String,
      default: ""
    },
    level: {
      default: 0
    },
    imgStyle: {
      type: Array,
      default: () => ["avatar_img"]
    },
    size: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
  destroyed() {}
};
</script>
<style lang="scss" scoped>
.avatar_box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .avatar_img {
    position: relative;
    height: 138px;
    width: 138px;
    border-radius: 100%;
    // border: solid 2px white;
  }
  .gender {
    position: absolute;
    right: 0;
    top: 0;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffd370;
  }
  .male {
    background-image: url("/game/static/images/mine/male.svg");
  }
  .female {
    background-image: url("/game/static/images/mine/female.svg");
  }
}
.username_box {
  width: 400px;
  margin-top: 15px;
  height: 50px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user_name {
  // position: absolute;
  // bottom: 0;
  // top: 130px;
  // left: 50%;
  // transform: translateX(-50%);
  font-size: 30px;
  color: #ffffff;
  letter-spacing: -0.31px;
  text-align: center;
  height: 50px;
  padding: 0 10px;
}
.user_level {
  border-radius: 100px;
  font-size: 24px;
  background-color: #f85050;
  color: #ffffff;
  padding: 2px 15px;
  white-space: nowrap;
  margin-left: 15px;
}
.small {
  .avatar_img {
    height: 107px;
    width: 107px;
  }
  .gender {
    height: 35px;
    width: 35px;
  }
  .user_name {
    height: 40px;
    font-size: 28px;
    top: 100px;
  }
}
.mini {
  .avatar_img {
    height: 70px;
    width: 70px;
  }
  .gender {
    height: 30px;
    width: 30px;
  }
  .user_name {
    height: 40px;
    font-size: 24px;
    top: 70px;
  }
}
</style>
